<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>查看角色</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="css/fontastic.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
    <div class="page">
     
        
      <div class="page-content d-flex align-items-stretch"> 
        <!-- Side Navbar -->
       
        <div class="content-inner" style="width: 100%;">
          <!-- Page Header-->
         
          <!-- Forms Section-->
          <section class="forms no-padding-top"> 
            <div class="container-fluid">
              <div class="row">
              
                <!-- Form Elements -->
                <div class="col-lg-12" >
                  <div class="card" >
                    <div class="card-close">
                      <div class="dropdown">
                        <button type="button" id="closeCard5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-ellipsis-v"></i></button>
                        <div aria-labelledby="closeCard5" class="dropdown-menu dropdown-menu-right has-shadow"><a href="#" class="dropdown-item remove"> <i class="fa fa-times"></i>Close</a><a href="#" class="dropdown-item edit"> <i class="fa fa-gear"></i>Edit</a></div>
                      </div>
                    </div>
                    <div class="card-header d-flex align-items-center">
                      <h3 class="h4" id='pageTitle'>新建角色</h3>
                    </div>
                    <div class="card-body">
                      <form class="form-horizontal">
                        <div class="form-group row no-padding-bottom">
                          <label class="col-sm-3 form-control-label">角色名称</label>
                          <div class="col-sm-9">
                            <input type="text" name="roleName" id="roleName" class="form-control">
                          </div>
                        </div>
                         <div class="form-group row no-padding-bottom">
                          <label class="col-sm-3 form-control-label">角色代码（e.g：admin）</label>
                          <div class="col-sm-9">
                            <input type="text" name="roleCode" id="roleCode" class="form-control">
                          </div>
                        </div>
                        
                       
                        
                        <div class="form-group row" style="height: auto;">
                          <label class="col-sm-3 form-control-label">角色描述</label>
                          <div class="col-sm-9" style="height: auto;">
                           
                            <textarea class="form-control" rows="5" id="roleDesc" ></textarea>
                            <small class="help-block-none">可拖拽右下角调整输入框大小.</small>
                          </div>
                        </div>
                        <div class="line"></div>
                        
                        <div class="form-group row">
                        	
                        	
                          <label class="col-sm-3 form-control-label h4">权限分配</label>
                          
                        </div>
                        
                        
                        
                        
                        <div class="row" id="powerArea">
	                        	<!-- 权限框-->
	                        	
	                        	<div class="col-lg-5  float-left " style="min-height: 200px; margin-left: 40px;border: 1px solid gray;border-radius: 30px;">
	                        		<label class="col-sm-3 form-control-label row">所有权限</label>
	                        		<div id="powerBox-all" style="min-height: 200px;">
	                        			<!--
	                        				<div class="btn btn-primary float-left power" style="margin-left: 10px;margin-top: 5px;" id="role_id1">quanxian</div>
	                        			-->
	                        			
	                        		</div>
	                        		
	                        	</div>
	                        	
	                        	<div class="col-lg-5  float-left " style="min-height: 200px;margin-left: 40px;border: 1px solid gray;border-radius: 30px;">
	                        		<label class="col-sm-3 form-control-label row ">角色权限</label>
	                        		<div id="powerBox-role" style="min-height: 200px;">
	                        			
	                        		</div>
	                        		
	                        		
	                        	</div>
	                        	
	                        
	                        
                        </div>
                        
                        
                        
                      
                        <div class="line"></div>
                        <div class="form-group row">
                          <div class="col-sm-4 offset-sm-3">
                            
                            <label id="saveRoleBtn"  class="btn btn-primary">确定</label>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
         
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <script src="vendor/jquery/jquery.min.js"></script>
    
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script type="text/javascript" src="js/jquery.easyui.min.js" ></script>
    
    <!-- Main File-->
    <script src="js/front.js"></script>
    <script type="text/javascript" src="js/getUrlParam.js" ></script>
    <script type="text/javascript">
     var roleId=UrlParm.parm("roleid"); 
 
 
 		//获取权限基本信息
 			$.ajax({
    			type:"post",
    			url:"authorize.spr?method=getRoleInf",
    			contentType:"application/json",
              dataType: "json",
              data:JSON.stringify({
              	"roleId":roleId
              }),
              success:function(data){
              	dataObj = eval("("+data+")");
              	
              	if(dataObj.result!="0000"){
                      alert(dataObj.msg);
                  }else{
                  	$("#roleCode").val(dataObj.params.role_name);
                  	$("#roleName").val(dataObj.params.role_name_ch);
                  	$("#roleDesc").val(dataObj.params.descch);
                  	
                  }
                },
                error:function(){
                	 alert("获取权限信息失败！");
                }
              });
              
    
    	
    	//拖拽事件预定义
    	
    function bindDropableEvent(){
    		$(function(){
			$('.power').draggable({
				proxy:'clone',
				revert:true,
				cursor:'auto',
				onStartDrag:function(){
					$(this).draggable('options').cursor='not-allowed';
					$(this).draggable('proxy').addClass('bg-gray');
				},
				onStopDrag:function(){
					$(this).draggable('options').cursor='auto';
				}
			});
			
			$('#powerBox-role').droppable({
				accept:'.power',
				onDragEnter:function(e,source){
					$(source).draggable('options').cursor='auto';
					$(source).draggable('proxy').css('border','1px solid red');
				},
				onDragLeave:function(e,source){
					$(source).draggable('options').cursor='not-allowed';
					$(source).draggable('proxy').css('border','1px solid #ccc');
				},
				onDrop:function(e,source){
					$(source).addClass('bg-green');
					$(this).append(source)
					
				}
			});
			
			$('#powerBox-all').droppable({
				accept:'.power',
				onDragEnter:function(e,source){
					$(source).draggable('options').cursor='auto';
					$(source).draggable('proxy').css('border','1px solid red');
				},
				onDragLeave:function(e,source){
					$(source).draggable('options').cursor='not-allowed';
					$(source).draggable('proxy').css('border','1px solid #ccc');
				},
				onDrop:function(e,source){
					$(this).append(source)
					$(source).removeClass('bg-green');
				}
			});
			
			
		});
    }

    //绑定创建按钮事件
    $("#saveRoleBtn").bind("click",function(){
    	midifyRole();
    });
    
    
    var rolePowersMap = new Map();
    	var allPowers = new Object();
    	var rolePowers = new Object();
    //初始化所有权限
    function initPower(){
    	
    	
    	
    	//获取该角色所拥有的所有权限
    	$.ajax({
    			type:"post",
    			url:"authorize.spr?method=getRolePowers",
    			contentType:"application/json",
              dataType: "json",
              data:JSON.stringify({
              	"roleId":roleId
              }),
              success:function(data){
              	dataObj = eval("("+data+")");
              	
              	if(dataObj.result!="0000"){
                      alert(dataObj.msg);
                  }else{
                  	rolePowers = dataObj.params.powers;
                  	
                  	rolePowers.forEach(function(e){
                  		rolePowersMap.set(e,"");
                  	});
                  	
                  }
                },
                error:function(){
                	 alert("获取权限信息失败！");
                }
              });
    	
    	//获取全部权限
    	$.ajax({
    			type:"post",
    			url:"authorize.spr?method=getAllPowers",
    			contentType:"application/json",
              dataType: "json",
              data:"",
              success:function(data){
              	dataObj = eval("("+data+")");
              	
              	if(dataObj.result!="0000"){
                      alert(dataObj.msg);
                  }else{
                  	allPowers = dataObj.params.powers;
                  	
                  }
                },
                error:function(){
                	 alert("获取权限信息失败！");
                }
              });
              
              
              //延时  等待ajax执行完毕
              window.setTimeout("fullPowers()",1000);
              
              
        
							    	
        
    	
    	
    	
    	
    	
    }
    
    
    function fullPowers(){
    	//填充权限
        						var temp = "";
        						var roletemp = "";
        						
        						
							    	for(var i =0 ;i<allPowers.length;i++){
							    		//若该权限不在用户权限中
							    		if(!rolePowersMap.has(allPowers[i].pcode)){
							    			temp = temp + '<div class="btn btn-primary float-left power" style="margin-left: 10px;margin-top: 5px;" id="'+allPowers[i].id+'">'+allPowers[i].descch+'</div>';

							    		}
							    		else{
							    				roletemp = roletemp + '<div class="btn btn-primary float-left power" style="margin-left: 10px;margin-top: 5px;" id="'+allPowers[i].id+'">'+allPowers[i].descch+'</div>';

							    		}

							    	}
				//填充角色权限
								$('#powerBox-all').append(temp);
								
							  $('#powerBox-role').append(roletemp);
							  
							  
							  //绑定拖拽事件
    	bindDropableEvent();
    }
    
    function midifyRole(){
    	
    	var newrole = getRolePower();
    	if(newrole==""||newrole==undefined){
    		return;
    	}
    	
    	$.ajax({
    			type:"post",
    			url:"authorize.spr?method=midifyRole",
    			contentType:"application/json",
              dataType: "json",
              data:JSON.stringify(newrole),
              success:function(data){
              	dataObj = eval("("+data+")");
              	
              	if(dataObj.result!="0000"){
                      alert(dataObj.msg);
                  }else{
                  	 $("#roleName").attr("disabled","true");
    	 							 $("#roleCode").attr("disabled","true");
    	       				 $("#roleDesc").attr("disabled","true");
                  		$("#saveRoleBtn").remove();
                  		alert("修改成功");
                  	
                  }
                },
                error:function(){
                	 alert("修改失败！");
                }
              });
    	//绑定拖拽事件
    	bindDropableEvent();
    	
    	
    	
    	
    }
    
    
    
    
    function getRolePower(){
    	var name = $("#roleName").val();
    	var code = $("#roleCode").val();
    	var desc = $("#roleDesc").val();
    	var powers ="";
    	
    	if(name == ""){
    		alert("请输入角色名！");
    		$("#roleName").focus();
    		return;
    	}
    	if(code == ""){
    		alert("请输入角色编码！");
    		$("#roleCode").focus();
    		return;
    	}
    	if(desc==""){
    		alert("请输入角色描述！");
    		$("#roleDesc").focus();
    		return;
    	}
    	
    	$("#powerBox-role").find("div.power").each(function(i,e){
    		powers = $(e).attr("id")+ ","+powers;
    		
    	});
    	//console.log( new roleObj(name,desc,powers));
    	 return new roleObj(name,code,desc,powers);
    }
    
    	
    	initPower();
    
    	
    	//创建 角色对象
    	function roleObj(roleName,roleCode,roleDesc,powers){	
    		this.roleId = roleId;
    		this.roleName = roleName;
    		this.roleCode = roleCode;
    		this.roleDesc = roleDesc;
    		this.powers = powers;
    	}
    	
    	
    	
    	
    	
    	
    	
    	
    </script>
  </body>
</html>
